<!DOCTYPE html>
<html>

<head>
    <title>Bui 框架 富文本编辑器 SSM框架开发</title>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
</head>

<body style="height: 100%;" id="mybody">
    <div>
        <h1>事件测试
            <button id="mybtn">创建双向绑定</button>
            <button id="modefyDom">删除(替换)DOM</button>
            <button id="bindNamespace">绑定命名空间事件</button>
            <button id="getToken">token</button>
            <button id="getData">getData</button>
        </h1>
        <div>
            事件名称：<input type="text" id="namespaceInput"/> <button id="unbind">移除事件</button>
        </div>
        <div id="formwrap">
            <span>btn1：<button id="btn1">按钮1</button> <span> btn2:<button id="btn2">创建内存数据</button></span></span>
            <span><a id="namespace">namespace event</a></span>
        </div>
        <script type="text/javascript">

            var bigData = [];

            function clickFn(e) {
                console.log("btn click >>>>>>>>>>>>>>>>> make big data >>>>>>>>>");
                let i = 0;
                while (i <= 4000000) {
                    bigData.push("中世纪东方了是副驾驶的开发技术的法律是的就分手了的废旧塑料开发的就是打发时间反馈说的水电费技术来肯定防守打法就三等奖菲利克斯地方吉林省看大嫁风尚束带结发临时开发设计费的师傅是否" + i);
                    i++;
                }
                console.log("btn click >>>>>>>>>>>>>>>>> make big data ok ");
                return false;
            }
            clickFn.bigData = bigData;


            $B.DomUtils.onDomLoaded(function (e) {
                console.log("页面加载完成...............");

        

                var fn1 = function(e){
                        console.log("fn1 myspace.click11111111111");
                        //console.log(e);
                    };
                var fn2 = function(e){
                        console.log("fn2 myspace.click222222");
                        //console.log(e);
                    };
                var fn3 = function(e){
                        console.log("fn3 el  mousedown");
                        //console.log(e);
                    }
                var fn4 = function(e){
                        console.log("fn4 el  mouseup");
                        //console.log(e);
                    };
                var fn5 = function(e){
                        console.log("fn5 myspace  dblclick");
                        //console.log(e);
                    };

                var fn6 = function(e){
                    console.log("fn6 myspace11  mouseover");
                };

                var fn7 = function(e){
                    console.log("fn7  mouseover");
                };
                var fn8 = function(e){
                    console.log("fn8  mouseover");
                };
                var fn9 = function(e){
                    console.log("fn9  mouseover");
                };

                $B.DomUtils.click(document.getElementById("unbind"),function(e){
                    var namespace = $B.DomUtils.value(document.getElementById("namespaceInput"));
                    if(namespace === ""){
                        $B.DomUtils.offEvents(document.getElementById("namespace")); //移除所有事件
                        return false;
                    }
                    namespace = parseInt(namespace);
                    var eventName,eventFn;
                    if(namespace === 1){
                        eventName = "click";
                        eventFn = fn1;
                    }else if(namespace === 2){
                        eventName = "myspace.click";
                        eventFn = fn2;
                    }else if(namespace === 3){
                        eventName = "mousedown";
                        eventFn = fn3;
                    }else if(namespace === 4){
                        eventName = "mouseup";
                        eventFn = fn4;
                    }else if(namespace === 5){
                        eventName = "myspace.*";
                        eventFn = fn5;
                    }else if(namespace === 6){
                        eventName = "myspace11.mouseover";
                        eventFn = fn6;
                    }else if(namespace === 7){
                        eventName = "mouseover";
                        eventFn = fn7;
                    }else if(namespace === 8){
                        eventName = "mouseover";
                        eventFn = fn8;
                    }else if(namespace === 9){
                        eventName = "mouseover";
                        eventFn = fn9;
                    }
                    $B.DomUtils.removeListener(document.getElementById("namespace"),eventName,eventFn);
                });


                $B.DomUtils.addListener(document.getElementById("bindNamespace"),"click",function(){
                    console.log("同一个元素绑定N个事件..........");
                    var el = document.getElementById("namespace");
                    $B.DomUtils.addListener(el,"myspace.click",fn1);

                    $B.DomUtils.addListener(el,"myspace.click",fn2);

                    $B.DomUtils.click(el,function(){
                        console.log("无命名空间click！");
                    });

                    $B.DomUtils.mousedown(el,fn3);

                    $B.DomUtils.mouseup(el,fn4);

                    $B.DomUtils.addListener(el,"myspace.dblclick",fn5);

                    $B.DomUtils.addListener(el,"myspace11.mouseover",fn6);

                    $B.DomUtils.mouseover(el,fn7);

                    $B.DomUtils.mouseover(el,fn8);

                    $B.DomUtils.mouseover(el,fn9);


                });
                // $B.DomUtils.click(document.body,function(e){
                //     console.log("body bodybody click >>>>>>>>>>>>>>>>>");
                // });         
                $B.DomUtils.click(document.getElementById("btn1"),function(e){
                    console.log("btn click >>>>>>>>>>>>>>>>>");
                    return false;
                });

                $B.DomUtils.click(document.getElementById("btn2"),  clickFn);

                $B.DomUtils.click(document.getElementById("modefyDom"), function () {
                    console.log("modefyDom btn 修改按钮,并销毁 bigData");
                    bigData = undefined;
                    clickFn = undefined;
                    let pel = document.getElementById("formwrap");
                    pel.innerHTML = '<button id="btn1112">按钮New</button>okok';
                    $B.DomUtils.dblclick( pel.querySelector("#btn1112"),function(){
                        console.log(" dblclick >>>>>>>>>>>>>>>>> dblclick ");
                    });

                    return false;
                });
            });







        </script>
</body>

</html>